<template>
    <view class="fate-info">
        <image class="title-image" mode="widthFix" :src="fate_image"></image>
        <!-- 标题区域 -->
        <view class="title-section">
            <tm-text _class="text-weight-b" :font-size="32" color="#333333" label="今日运势"></tm-text>
            <tm-icon name="tmicon-angle-down" :font-size="28" color="#333333" @click="showPicker = true"></tm-icon>
        </view>
        <date-picker
            :visible="showPicker"
            @confirm="handleDateConfirm"
            @cancel="showPicker = false"
        />

        <view class="container">
           <!-- <image mode="widthFix" class="container-bg" :src="container_bg" /> -->

           <!-- 运势指数区域 -->
            <FateIndex :fateInfo="fateInfo" />

            <view class="divider-horizontal"></view>

            <!-- 运势解析区域 -->
            <view class="fortune-section">
                <tm-text :font-size="28" color="#333333">
                    <text class="text-weight-b">运势解析：</text>
                    {{ fateInfo?.general_txt || '' }}
                </tm-text>
            </view>

            <!-- 宜忌双栏布局 -->
            <view class="taboo-layout">
              <!-- 第一条分隔线 -->
              <view class="divider-horizontal"></view>

              <!-- 宜的内容 -->
              <view class="taboo-section">
                <view class="section-header">
                  <tm-text _class="text-weight-b" :font-size="32" color="#4FAA49" label="宜"></tm-text>
                  <view class="divider-vertical"></view>
                  <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="(fateInfo?.taboos || '').replace(/^\[|\]$/g, '').replace(/,/g, ' ')"></tm-text>
                </view>
              </view>

              <!-- 第二条分隔线 -->
              <view class="divider-horizontal"></view>

              <!-- 忌的内容 -->
              <view class="taboo-section">
                <view class="section-header">
                  <tm-text _class="text-weight-b" :font-size="32" color="#D9534F" label="忌"></tm-text>
                  <view class="divider-vertical"></view>
                  <tm-text _class="text-weight-b" :font-size="28" color="#333" :label="fateInfo?.avoids === '[]' ? '无' : (fateInfo?.avoids || '无').replace(/^\[|\]$/g, '').replace(/,/g, ' ')"></tm-text>
                </view>
              </view>

              <!-- 第三条分隔线 -->
              <view class="divider-horizontal"></view>
            </view>

            <LuckyTips :fateInfo="fateInfo" />

            <view class="full-fortune-button">
                <tm-button @click="viewFullFortune">
                    <text class="button-text">查看完整运势</text>
                </tm-button>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { isEmpty } from "lodash";
import fate_image from '/static/assets/images/index/fate.png'
import title_bg from '/static/assets/images/index/title-bg.png'
import container_bg from '/static/assets/images/index/container-bg.png'
import LuckyTips from './LuckyTips/LuckyTips.vue'
import FateItme from './FateItem/FateItemCard.vue'
import FateIndex from './FateIndex/FateIndexItem.vue'
import DatePicker from './DatePickerPopup/DatePickerPopup.vue'

import { ref } from 'vue'

const showPicker = ref(false)

const handleDateConfirm = (date: Date) => {
  console.log('选择日期:', date)
  showPicker.value = false
}

const props = defineProps({
    fateInfo: {
        type: Object,
        default: () => ({})
    }
})

const fateInfoList = computed(() => {
    if (isEmpty(props.fateInfo)) return [];
    return [
        { name: '爱情', type: 'love', value: props.fateInfo.love_txt },
        { name: '工作', type: 'work', value: props.fateInfo.work_txt },
        { name: '财富', type: 'money', value: props.fateInfo.money_txt },
    ]
})

const viewFullFortune = () => {
    // 这里可以实现查看完整运势的功能
    // TODO
};

</script>

<style lang="less" scoped>
.title-image {
    width: 100%;
    display: block;
}

.title-section {
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-left: 0;
    padding: 20rpx 20rpx 20rpx;
}

.container {
    background: #fff;
    margin: 0 10rpx;
    padding: 28rpx 30rpx 40rpx 20rpx;
    border-radius: 0px 0px 16rpx 16rpx;
    position: relative;
    z-index: 0;

    .container-bg {
        width: 100%;
        position: absolute;
        top: 76rpx;
        left: 0;
        z-index: -1;
    }

    .fortune-section {
        margin: 24rpx 0 40rpx;
    }

    /* 宜忌整体布局 */
    .taboo-layout {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    /* 水平分隔线 */
    .divider-horizontal {
      height: 1px;
      background-color: #eee;
      margin: 0;
    }

    /* 垂直分隔线 */
    .divider-vertical {
      width: 1px;
      background-color: #eee;
      margin: 0 20rpx;
      height: 100%; /* 使分隔线与内容同高 */
    }

    /* 每个宜忌区块 - 新增固定高度 */
    .taboo-section {
      padding: 20rpx 0;
      min-height: 100rpx; /* 设置最小高度 */
      display: flex;
      align-items: center;
    }

    /* 区块头部样式 */
    .section-header {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      width: 100%;
      height: 100%;
    }

    /* 确保文本区域等高 */
    .tm-text {
      line-height: 1.5; /* 统一行高 */
    }

    .full-fortune-button {
        display: flex;
        justify-content: center;
        margin: 32rpx 0 16rpx;
        max-width: 520rpx;
        margin-left: auto;
        margin-right: auto;

        .tm-button {
            width: 480rpx;
            height: 80rpx;
            background-color: #FF8C00 !important;
            border-radius: 40rpx;
            padding: 0 60rpx;
            width: auto;
            min-width: 480rpx;

            .button-text {
                font-weight: bold;
                font-size: 32rpx;
                color: #fff;
                white-space: nowrap;
            }
        }
    }
}
</style>